<template>
  <div class="body-wrap">
    <div class="head">
      微信扫码登录
    </div>
    <div class="qrCode-box" :loading="loading">
      <div class="qrCode-wrap">
    <div class="iframe-wrap">
      <div class="handle-wrap" v-loading="loading">
        <div class="err-wrap"
          v-if="!loading &&!wxurl">
          <svg-icon icon-class="no-signal" />
          <p>网络加载失败</p>
          <el-button type="primary"
            size="small"
            class="refresh-btn"
            @click="refresh">刷新试试</el-button>
        </div>
        <div class="wx-wrap" ref="qrCode" v-show="wxurl">

        </div>
      </div>
    </div>
  </div>
    </div>
    <div class="other-login">
      <p class="other-login-title">
        <b></b>
        <span>选择其他登录方式</span>
        <b></b>
      </p>
      <span class="icon-btn" title="快捷登录" v-if="appInfo.isLXAnonymousLogin">
        <svg-icon iconClass="quick"
          class="wechat"
          @click="ohterLogin('anonymousLogin')" />
      </span>
      <span class="icon-btn" title="手机号登录">
        <svg-icon iconClass="phone2"
          @click="ohterLogin('phoneLogin')" />
      </span>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import QRCode from 'qrcodejs2'
import { createGzhQrcode, checkGzhLogin, login } from '@/api/login'
import mixins from './mixins'
export default {
  name: 'WxgzhLogin',
  mixins: [mixins],
  props: {
    isPage: Boolean
  },
  data () {
    return {
      loading: true,
      qrcode: null,
      wxurl: ''
    }
  },
  computed: {
    ...mapGetters(['appInfo'])
  },
  created () {
    this.getPartyParam()
  },
  mounted () {
    const container = this.$refs.qrCode
    this.qrcode = new QRCode(container, {
      text: this.text,
      width: 140,
      height: 140,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: 0
    })
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {
    /**
     * 获取第三方登录参数
     */
    getPartyParam () {
      this.loading = true
      createGzhQrcode({
        expire_seconds: 82800,
        extra: {
          app_id: this.appInfo.appID,
          scene: 'login'
        }
      }).then(res => {
        const data = res.data || {}
        this.wxurl = data.url
        this.ticket = data.ticket
        this.qrcode && this.qrcode.makeCode(data.url)
        this.qrcode._el.title = ''
        this.loading = false
        this.setTime()
      }).catch(e => {
        this.$PsMessage.closeAll()
        this.loading = false
      })
    },
    setTime () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        checkGzhLogin({ ticket: this.ticket }).then(res => {
          if (res.data) {
            this.onWxLoginFinish({ code: res.data })
          } else {
            this.setTime()
          }
        }).catch(() => {
          this.setTime()
        })
      }, 2000)
    },
    /**
     * 刷新二维码
     */
    refresh () {
      this.$xz('xz_substat_action', 1725)
      this.getPartyParam()
    },
    /**
     * 切换登录方式
     */
    ohterLogin (type) {
      this.$xz('xz_substat_action', 1724)
      this.$store.dispatch('user/login', { type })
    },
    onWxLoginFinish ({ code } = {}) {
      const params = {
        'type': 'wx_official_account',
        'authCode': code, // 第三方登录授权码
        'grantType': 'authorization_code', // 授权类型 client_credentials: 客户端凭证 authorization_code:授权码
        'channel': this.appInfo.channel, // 渠道信息
        'uuid': this.appInfo.uuid, // 设备信息
        'device_name': this.appInfo.device_name, // 设备名称
        'version': this.appInfo.version
      }
      login(params).then(res => {
        const data = res.data || {}
        data.isAutoLogin = true
        data.isLogin = true
        data.loginType = 'wxLogin'
        this.onLoginFinish(data)
      }).catch(err => {
        if (err && err.code === 100429) {
          const data = err.data
          data.isAutoLogin = true
          data.loginType = 'wxLogin'
          this.needDelDevice(data)
        } else {
          this.refresh()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/other-login.scss";
.body-wrap {
  width: 270px;
}
.head {
  padding: 0 0 20px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}
.qrCode-box{
  margin-bottom: 88px;
}
.qrCode-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.iframe-wrap {
  position: relative;
  height: 100%;
  z-index: 2;
}

.handle-wrap {
  position: relative;
  height: 100%;
  /deep/.el-loading-spinner .circular {
    width: 24px;
    height: 24px;
  }
  /deep/.el-loading-mask {
    border-radius: 6px;
    background: #494a4f;
  }
}
.wx-wrap {
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.err-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 12px;
  color: #999999;
  background: #494a4f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 6px;
  .svg-icon {
    font-size: 64px;
    margin-bottom: 10px;
  }
  .refresh-btn {
    position: absolute;
    bottom: -46px;
    width: 120px;
  }
}
</style>
